<template>
  <div class="sale">
    <!-- <el-input class="today_ipt" type="text" v-model="today" placeholder="today"></el-input> -->
    <el-affix class="top_button">
      <el-date-picker
          v-model="value2"
          type="daterange"
          unlink-panels
          range-separator="至"
          :start-placeholder="value2[0]"
          :end-placeholder="value2[1]"
          value-format="YYYYMMDD"
          @change="saledata"
        >
        </el-date-picker>
      <!-- <el-button  @click="saledata" type="success" icon="el-icon-search"></el-button> -->
      <el-button
        class="exportAllData"
        type="primary"
        :loading="downloadLoading"
        @click="exportAllData"
        icon="el-icon-download"
        plain
        >导出</el-button
      >
      <!-- <el-button type="success" :loading="downloadLoading" @click="exportSelectedData">已选</el-button> -->
      <!-- <el-button type="success" :loading="downloadLoading" @click="paixu">销量</el-button> -->
    </el-affix>
    <div>
      <div style="margin: 5px 0"></div>
      <el-table
        ref="multipleTable"
        :data="sale_l"
        border
        highlight-current-row
        :fit=true
        height="calc(100vh - 145px)"
        style="width: 100%"
        v-loading="isres"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
        
      >
        <!-- <el-table-column type="selection" width="30" ></el-table-column> -->
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column
          v-for="(col, i) in cols"
          :key="i"
          :prop="col"
          :label="col"
          sortable
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { tool } from "@/api/echarts";
import { reactive, toRefs } from '@vue/reactivity';
export default {
  setup() {
      const data=reactive( {
      sale_l: [],
      cols: [],
      value2: [dayjs().format("YYYYMMDD"), dayjs().format("YYYYMMDD")],
      downloadLoading: false,
      isres:false,
      selectionList: [],
  });
    const saledata=async ()=>{
        data.isres=true;
      const result = await tool.post({ start: data.value2[0],end:data.value2[1] });
      data.isres=false;
      data.sale_l = result.data.map((o) => {
        return {
          商品名称: o.pn,
          销量: o.num,
          组合品: o.flag,
          订单类型: o.memo,
        };
      });
      data.cols = Object.keys(data.sale_l[0]);
    };
    const exportExcel=(tableRef, filename, selection)=> {
      data.downloadLoading = true;
      // 采用动态导入
      import("@/utils/Export2Excel").then((excel) => {
        excel.export_table_to_excel({ tableRef, filename, selection });
        data.downloadLoading = false;
      });
    };
    /**
     * 导出表格已加载的所有数据
     */
    const exportAllData=()=> {
      // this.$refs.multipleTable 对应 <el-table> 组件的属性： ref="multipleTable"
      exportExcel(data.sale_l, data.value2[1]);
    };
    /**
     * 导出表格已选择数据
     */
    const exportSelectedData=()=> {
      // this.$refs.multipleTable 对应 <el-table> 组件的属性： ref="multipleTable"
      exportExcel(
        data.sale_l,
        `导出选择数据-${new Date().getTime()}`,
        true
      );
    };
    saledata();
    return {...toRefs(data),saledata,exportExcel,exportAllData,exportSelectedData}
  },
};
</script>
<style scoped>
.top_button {
  margin: auto;
  z-index: 2;
  background: #fff;
  padding: 10px 0;
  text-align: center;
}
.exportAllData {
  margin-left: 20px;
}
</style>

